<template>
  <ul class="tool-list">
    <li
      v-for="item in data"
      :key="item.name"
      class="tool-list-item"
      @click="openTool(item)">
      <img :src="item.icon" :alt="item.name" :title="item.name" class="icon" />
      <p class="name">{{ item.name }}</p>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'toolList',
  props: {
    data: {
      type: [Array, Object],
      default: () => []
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    /**
     * 打开工具
     * @param {Object} row 工具对象
     */
    openTool(row) {
      this.$store.commit('SETTOOLINFO', row)
      row.openType()
      this.$emit('openTool', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.tool-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: var(--text-color);
  .tool-list-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    gap: 5px;
    &:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    img {
      width: 40px;
      aspect-ratio: 1/1;
    }
  }
}
</style>
